<template>
  <div
    class="imgBox"
    :class="F.class"
    @mouseenter="add()"
    @mouseleave="rem()"
    :style="{width:F.w,height:F.h,'padding-bottom':F.padding}"
  >
    <div class="img">
      <router-link :to="msg.url">
        <img :src="msg.src" alt :style="{width:F.imgw,height:F.imgh}" />
      </router-link>
    </div>
    <div class="boxBoot" @mouseleave="p.H='0px'" @mouseover="p.H='20px'" v-if="p.hid">
      <div class="text">
        <router-link :to="msg.url">
          <span>{{msg.t1}}</span>
          <span>{{msg.t2}}</span>
          <span>￥{{msg.t3}}</span>
          <span v-if="msg.t4">￥{{msg.t4}}</span>
        </router-link>
      </div>
      <div class="identifying" :style="{height:p.H}">
        <i class="el-icon-star-off"></i>
        <i class="el-icon-shopping-cart-full"></i>
        <i class="el-icon-link"></i>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      p: {
        H: "0px",
        hid: true
      },
      F: {
        w: "100%",
        h: "",
        c: 0,
        imgh: "100%",
        class: "",
        imgw: "100%",
      }
    };
  },
  props: ["msg"],
  computed: {},
  created: function() {
    if (this.msg.w != "") {
      this.F.w = this.msg.w;
    }
    if (this.msg.h != "") {
      this.F.h = this.msg.h;
    }
    if (this.msg.c != undefined) {
      this.F.c = this.msg.c;
    }
    if (this.msg.imgw != undefined) {
      this.F.imgw = this.msg.imgw;
    }
    if (this.msg.imgh != undefined) {
      this.F.imgh = this.msg.imgh;
    }
    if (
      this.msg.t1 == undefined &&
      this.msg.t2 == undefined &&
      this.msg.t3 == undefined &&
      this.msg.t4 == undefined
    ) {
      this.p.hid = false;
    }
    // this.F.t1 = msg.t1;
  },
  methods: {
    add() {
      this.F.class = "imgboxHover" + this.F.c;
    },
    rem(val) {
      this.F.class = "";
    },
    identifying() {}
  },
  components: {}
};
</script>

<style lang="scss" type="text/css" scoped>
@import "../../common/style.scss";
$timer: 0.3s;
.imgBox {
  text-align: center;
  background-color: rgb(255, 255, 255);
  position: relative;
  .text {
    width: 100%;
  }
  .boxBoot {
    position: absolute;
    width: 100%;
    bottom: 10px;
  }
  .identifying {
    // display: none;
    width: 100%;
    height: 20px;
    overflow: hidden;
  }
  cursor: pointer;
  span {
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  span:nth-child(1) {
    margin: 0 10px 2px;

    font-size: 14px;
    font-weight: 400;
    color: #333;
  }
  span:nth-child(2) {
    margin: 0 10px 10px;
    // height: 18px;
    font-size: 12px;
    color: #b0b0b0;
  }
  span:nth-child(3) {
    display: inline;
    text-align: center;
    color: $main-color;
  }
  span:nth-child(4) {
    display: inline;
    color: #bbbbbb;
    text-decoration: line-through;
    font-size: 13px;
  }
}
.sdsd,
.identifying,
.imgboxHover1,
.Ftext,
.imgBox {
  transition: $timer;
  -moz-transition: $timer; /* Firefox 4 */
  -webkit-transition: $timer; /* Safari 和 Chrome */
  -o-transition: $timer; /* Opera */
}

.imgboxHover1 {
  z-index: 2;
  -webkit-box-shadow: 0 18px 30px rgba(0, 0, 0, 0.1);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.1);
  -webkit-transform: translate3d(0, -2px, 0);
  transform: translate3d(0, -2px, 0);
}
.imgboxHovert {
  -webkit-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  -o-transform: translateY(-10px);
  transform: translateY(-10px);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.07);
  -webkit-box-shadow: 0 10px 18px rgba(0, 0, 0, 0.07);
  -moz-box-shadow: 0 10px 18px rgba(0, 0, 0, 0.07);
}
.imgboxHoverr {
  -webkit-transform: translateX(-10px);
  -ms-transform: translateX(-10px);
  -o-transform: translateX(-10px);
  transform: translateX(-10px);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.07);
  -webkit-box-shadow: 0 10px 18px rgba(0, 0, 0, 0.07);
  -moz-box-shadow: 0 10px 18px rgba(0, 0, 0, 0.07);
}
.imgboxHoverl {
  -webkit-transform: translateX(10px);
  -ms-transform: translateX(10px);
  -o-transform: translateX(10px);
  transform: translateX(10px);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.07);
  -webkit-box-shadow: 0 10px 18px rgba(0, 0, 0, 0.07);
  -moz-box-shadow: 0 10px 18px rgba(0, 0, 0, 0.07);
}
</style>